import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,FlatList,TouchableNativeFeedback,Image} from 'react-native';


type Props = {};
export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            selectId:1,
            categoryList:[{id:0,name:'加载中'}],
            articleList:[]
        };
        this.navigationClick = this.navigationClick.bind(this);
    }

    navigationClick(tid){
        this.setState({
            selectId:tid
        });
        fetch("http://169.254.73.230:8080/getArticleListByCategoryId?categoryId="+tid,
            {
                method:"get",
                mode:'cors',
                headers:{
                    Accept:"application/json",
                    "Content-Type":"application/json"
                }
            })
            .then(response=>response.json())
            .then(myjson=>{
                this.setState({
                    articleList:myjson
                });
            })
            .catch(err=>{
                alert('发生异常:'+err);
            });
    }

    _renderItem =({item})=>{
        let myFontColor = '';
        let myBorderColor = '';
        if (item.id===this.state.selectId){
            myFontColor = 'red';
            myBorderColor = 'red';
        }else{
            myFontColor = '#3C3C3C';
            myBorderColor = '#ACACAC';
        }
        return (
            <TouchableNativeFeedback onPress={this.navigationClick.bind(this,item.id)}>
                <Text style={{color:myFontColor,fontSize:20,width:60,borderBottomWidth: 3,borderColor:myBorderColor}}>{item.name}</Text>
            </TouchableNativeFeedback>
        );
    }

    _renderItemArticle  =({item})=>{
        return (
            <View style={{height:120,backgroundColor: '#FFFFFF',flexDirection: 'row'}}>
                <View style={{flex:2,flexDirection: 'column'}}>
                    <View style={{flex:2,paddingLeft: 10}}><Text style={{fontSize: 20,color: '#232323'}}>{item.title}   (id:{item.id})</Text></View>
                    <View style={{flex:1,paddingLeft: 10}}><Text style={{fontSize: 13,color: '#B7B7B7'}}>{item.author}</Text></View>
                </View>
                <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
                    <Image source={{uri: 'http://169.254.73.230:8080/img/'+item.pic1+'.jpg'}} style={{width: 113, height: 73}} />
                </View>
            </View>
        )
    }

    _keyExtractor = (item,index)=>{
        return item.id.toString();
    }

    _keyExtractorArticle = (item,index)=>{
        return item.id.toString();
    }

    _separator=()=>{
        return <View style={{height:1,backgroundColor:'#F3F3F3'}}></View>
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={{height:60,backgroundColor: 'red'}}><Text>搜索框</Text></View>
                <View style={{height:40}}>
                    <FlatList
                        extraData={this.state}
                        renderItem={this._renderItem}
                        data={this.state.categoryList}
                        keyExtractor={this._keyExtractor}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                    />
                </View>
                <View style={{flex: 1}}>
                    <FlatList
                        extraData={this.state}
                        renderItem={this._renderItemArticle}
                        data={this.state.articleList}
                        keyExtractor={this._keyExtractorArticle}
                        horizontal={false}
                        ItemSeparatorComponent={this._separator}
                        showsHorizontalScrollIndicator={true}
                    />
                </View>
            </View>
        );
    }

    componentDidMount() {
        fetch("http://169.254.73.230:8080/componentDidMount",
            {
                method:"get",
                mode:'cors',
                headers:{
                    Accept:"application/json",
                    "Content-Type":"application/json"
                }
            })
            .then(response=>response.json())
            .then(myjson=>{
                this.setState({
                    categoryList:myjson.categoryList,
                    articleList:myjson.articleList
                });
            })
            .catch(err=>{
                alert('发生异常'+err);

            });
    };

}

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});
